<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="500" height="400"></canvas>
    <script>
        let canvas = document.querySelector('canvas')
        let context = canvas.getContext('2d')

        // 绘制第一步：开始绘制
        context.beginPath()

        /*
            lineWidth 画笔的宽度
            strokeStyle 画笔的颜色
            注意是采用赋值的方式去设置的
        */
       context.lineWidth = 4
       context.strokeStyle = 'pink'

        // 绘制第二步：将画笔移动到起始位置
        context.moveTo(100,50)

        // 绘制第三步：绘制线段，将画笔从当前位置绘制到下一个坐标点
        context.lineTo(200,50)
        context.lineTo(150,100)
        context.lineTo(100,50)

        // 绘制第四步：描边，其实就是方向什么的都制定好了，现在真正开始画了
        context.stroke()

        //注意，如果你想继续画一个新的图形，那么就要重复之前的步骤，哪怕是beginPath()这一步，其实也很好理解，就像你真的画画一样，画完了头，该画身子了，肯定要重新定位，重新构思，画笔颜色什么的可能也要重新换颜色。当然，你也可以选择不换颜色，不过定位肯定是要重新弄得
        context.beginPath()
        context.moveTo(100,300)
        context.lineTo(200,400)
        context.lineTo(100,400)
        context.lineTo(100,300)
        context.stroke()

        // 现在，我给你提一个问题，我要你画一个三角形，但是三条边的颜色都不一样，你会怎么画？你肯定觉着是不是每次lineTo()后，调用一下strokeStyle赋值就行了。我告诉你这样做不行，因为这个画图的机制是，你每次的lineTo定位被记录下来，然后画笔的颜色也会被记录下来，最后stroke一气呵成画完，不过要注意你写的画笔颜色赋值语句会后者覆盖前者，导致只有最后一个画笔颜色赋值语句生效，所以想要完成这个问题，你必须每次画线段的时候都重新开启一次绘画，也就是beginPath()这些再来一遍。直到三个线段都画完
    </script>
</body>
</html>